<template>
    <div class="container">
        <el-form label-width="100px">
            <el-form-item label="分割类型：">
                <el-radio-group v-model="list.isempt" @change="handList">
                    <el-radio-button label="辅助空白"></el-radio-button>
                    <el-radio-button label="辅助线"></el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="空白高度：" v-if="list.isempt == '辅助空白'">
            </el-form-item>
            <el-slider @change="handList" v-model="list.height" show-input v-if="list.isempt == '辅助空白'">
            </el-slider>
        </el-form>
        <el-form label-width="100px" v-if="list.isempt == '辅助线'">
            <el-form-item label="分割类型：">
                <el-radio-group v-model="list.linetype" @change="handList">
                    <el-radio-button label="虚线"></el-radio-button>
                    <el-radio-button label="实线"></el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="辅助颜色：">
                <el-color-picker @change="handList" v-model="list.color" show-alpha></el-color-picker>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name: "division",
    props: {
        data: {
            type: Object,
            default: () => { },
        },
    },
    watch: {},

    data() {
        return {
            list: {
                isempt: '辅助空白',
                height: 0,
                type: '实线',
                color: '',
            },
        };
    },
    mounted() {
        // this.list = Object.assign(this.list, this.data);
        this.list = this.data

    },
    methods: {
        handList(e) {
            this.$emit("change", this.list)
        }
    },
};
</script>
<style scoped lang="scss">
.container {
    padding: 20px;

}
</style>